<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>前台测试页</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body >
<!--top menu-->
<header>
		<img src="img/图标.jpg">
		<strong>新卓越在线考试管理系统</strong>
        <ul class="nav nav-tabs myTab-all" role="tablist" id="myTab">

		  <li role="presentation" class="active"><a href="#myClass" role="tab" data-toggle="tab">我的课程</a></li>
		  <li role="presentation"><a href="#test" role="tab" data-toggle="tab">待考课程</a></li>
		  <li role="presentation"><a href="#history" role="tab" data-toggle="tab">历史成绩</a></li>
		  <li role="presentation"><a href="#home" role="tab" data-toggle="tab">个人信息</a></li>
		</ul>


        <span id="userName" class="m-r-10">上午好,卓小越  <a href="index.html">  退出</a></span>
</header>



<!-- section area -->
<div class="section col-md-10  clearfix">


    	<div class="tab-content">



		  <div role="tabpanel" class="tab-pane panel panel-info fade in active" id="myClass">
		  	<div class="one">
		  		<i class="icon ion-ios-locked-outline "></i>
		  		<h3>C语言</h3>
		  		<p>已有<span>.....</span>上课</p>
		  		<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">开始考试！</button>
		  	</div>
		  	<div class="two">
		  		<i class="icon ion-android-bus "></i>
		  		<h3>程序语言</h3>
		  		<p>已有<span>.....</span>上课</p>
		  		<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">开始考试！</button>
		  	</div>
		  	<div class="three">
		  		<i class="icon ion-ios-analytics "></i>
		  		<h3>程序语言</h3>
		  		<p>已有<span>.....</span>上课</p>
		  		<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">开始考试！</button>
		  	</div>
		  	<div class="four">
		  		<i class="icon ion-ios-bell "></i>
		  		<h3>程序语言</h3>
		  		<p>已有<span>.....</span>上课</p>
		  		<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">开始考试！</button>
		  	</div>

		  </div>
              <div role="tabpanel" class="tab-pane panel panel-info fade" id="test">
                <div class="one">
                    <i class="icon ion-ios-locked-outline "></i>
                    <h3>程序语言</h3>
                    <p>已有<span>.....</span>练习</p>
                   <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">start</button>
                </div>
                 <div class="one">
                    <i class="icon ion-ios-locked-outline "></i>
                    <h3>程序语言</h3>
                    <p>已有<span>.....</span>练习</p>
                   <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">start</button>
                </div>
                 <div class="one">
                    <i class="icon ion-ios-locked-outline "></i>
                    <h3>程序语言</h3>
                    <p>已有<span>.....</span>练习</p>
                   <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">start</button>
                </div>
                 <div class="one">
                    <i class="icon ion-ios-locked-outline "></i>
                    <h3>程序语言</h3>
                    <p>已有<span>.....</span>练习</p>
                   <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">start</button>
                </div>
                 <div class="one">
                    <i class="icon ion-ios-locked-outline "></i>
                    <h3>程序语言</h3>
                    <p>已有<span>.....</span>练习</p>
                   <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">start</button>
                </div>
                 <div class="one">
                    <i class="icon ion-ios-locked-outline "></i>
                    <h3>程序语言</h3>
                    <p>已有<span>.....</span>练习</p>
                   <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">start</button>
                </div>
                <div class="two">
                    <i class="icon ion-android-bus "></i>
                    <h3>程序语言</h3>
                    <p>已有<span>.....</span>练习</p>
                  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">start</button>
                </div>
                <div class="three">
                    <i class="icon ion-ios-analytics "></i>
                    <h3>程序语言</h3>
                    <p>已有<span>.....</span>练习</p>
                   <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">start</button>
                </div>
                <div class="four">
                    <i class="icon ion-ios-bell "></i>
                    <h3>程序语言</h3>
                    <p>已有<span>.....</span>练习</p>
                   <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">start</button>
                </div>
          </div>


		  <div role="tabpanel" class="tab-pane fade panel panel-info" id="history">
          		<table class="history-table table table-striped">
                      <tr>
                        <td>课程</td>
                        <td>状态</td>
                        <td>成绩</td>
                        <td>时间</td>
                      </tr>
                      <tr>
                        <td>2016软师结业考试</td>
                        <td>已考试</td>
                        <td>90</td>
                        <td>2016-09-09</td>
                      </tr>
                      <tr>
                        <td>2016软师结业考试</td>
                        <td>已考试</td>
                        <td>80</td>
                        <td>2016-09-09</td>
                      </tr>
                      <tr>
                        <td>2016软师结业考试</td>
                        <td>已考试</td>
                        <td>80</td>
                        <td>2016-09-09</td>
                      </tr>
                      <tr>
                        <td>2016软师结业考试</td>
                        <td>已考试</td>
                        <td>80</td>
                        <td>2016-09-09</td>
                      </tr>
                      <tr>
                        <td>2016软师结业考试</td>
                        <td>已考试</td>
                        <td>80</td>
                        <td>2016-09-09</td>
                      </tr>
                    </table>
          </div>


		<div role="tabpanel" class="tab-pane fade panel panel-info " id="home">
			<div class="panel-heading">
				<h3 class="panel-title">个人信息</h3>
			</div>
		  	<ul id="detailed" class="panel-body">
		  		<li>学号：<span>0000000</span></li>
		  		<li>姓名：<span>xxx</span></li>
		  		<li>已参加课程：<span>xxxx</span></li>
		  		<li>状态：<span>xxxx</span></li>
		  		<li>加入时间：<span>xxxx.xx.xx</span></li>
		  		<li>校区：<span>xxxx</span></li>
		  	</ul>


		</div>
		</div>
</div>


<!--考试说明提醒模态框-->

<!-- 按钮触发模态框 -->

<!-- 模态框（Modal） -->
<div class="modal fade" style="z-index: 100;" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					考试说明
				</h4>
			</div>
			<div class="modal-body">
				您讲参加的是2016年的c语言考试，此次考试限时2小时，超时将自动提交。请合理分配考试时间。
			</div>
			<div class="modal-body">
				<h4>选择题：</h4><p>分为单选题呵不定项题，单选题选对得分，
				不定项题全对得分，漏选扣分，选错不得分。</p>
			</div>
			<div class="modal-body">
				<h4>简答题：</h4><p>请将思考过程及结果输入，只有结果不得分，可以以照片形式上传验算过程。</p>
			</div>
			<div class="modal-body">
				<h4>编程题：</h4><p>请写出实现程序的完整代码，编程语言不限。</p>
			</div>

			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					题型分布
				</h4>
			</div>
			<div class="modal-body">
				<ul class="modal-body-topic">
					<li>选择题：20题 每题5分</li>
					<li>简答题：2题 每题20分</li>
					<li>编程题：3题 每题20分</li>
				</ul>
			</div>


			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					<a href="test.html" style="display: block; width: 100%; height: 100%;">开始考试</a>
				</button>
			</div>
		</div> /.modal-content
	</div><!-- /.modal -->
</div>

<!-- section area end -->

<!--footer area-->
<div  class="footer">
    	<strong class="footer m-l-20">Copyright © 2016 <a href="http://thoughtcoding.csxupt.com">新卓越计算机教育</a>.All rights reserved.</strong>
</div>

<script type="text/javascript" src = "js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src = "js/common.js"></script>
<script>
	$(function () {
    $('#myTab a:first').tab('show')
  })

  $('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')

})
  var oMyTab = document.getElementById('myTab');

var aLi = oMyTab.getElementsByTagName('li');
//for(var i=0; i<aLi.length;i++)
//{
//	aLi[i].index = i;
//	aLi[i].onclick = function(){
//		for(var j=0;j<aLi.length;j++)
//		if(this.index==j)
//		{
//			aLi[j].style.display = 'block';
//		}
//		else{
//			aLi[j].style.display = 'none';
//		}
//	}
//}
</script>
</body>
</html>
